$menuItem-hover: #ecf5ff;
$menuItem-bg: #fff;
$submenu-title: #303133;
$menuItem-height: 50px;

$theme: #3963bc;

.el-menu-profile {
  padding-top: 10px;
  border-right: none;

  .is-active {
    color: $theme !important;
    background: $menuItem-hover;

    &.el-menu-item .iconfont {
      color: $theme !important;
    }
  }

  .el-submenu__icon-arrow {
    top: 53%;
  }

  .app-sidebar .el-menu-item-group .el-menu-item {
    padding-left: 60px !important;
  }

  .el-submenu.is-active {
    .el-submenu__title {
      color: $theme !important;
      height: 50px;

      i {
        color: $theme;
      }
    }
  }

  .el-submenu.is-active.is-opened {
    .el-submenu__title {
      color: $submenu-title !important;
      background: $menuItem-bg !important;
      height: 50px;

      &:hover {
        background: $menuItem-hover !important;
      }

      i {
        color: $submenu-title;
      }
    }
  }

  .is-opened {
    .el-submenu__title {
      height: $menuItem-height;
      transition: border-color 0s, background-color 0s, color 0s;
    }

    .el-menu--inline {
      background: $menuItem-bg !important;
    }

    .el-submenu__title {
      background: $menuItem-bg !important;

      &:hover {
        background-color: $menuItem-hover !important;
      }
    }

    .el-menu-item {
      background: $menuItem-bg !important;

      &:hover {
        background-color: $menuItem-hover !important;
      }
    }
  }

  .el-menu-item {
    height: $menuItem-height;
    transition: border-color 0s, background-color 0s, color 0s;

    &:hover {
      background-color: $menuItem-hover;
    }
  }

  .el-menu--popup-right-start {
    margin-top: 5px;
    padding-bottom: 0px;

    .el-menu-item-group {
      background: red;
      margin-top: -10px;

      .el-menu-item-group__title {
        padding-top: 0px;
        padding-bottom: 0px;
      }
    }
  }

  .el-submenu__title {
    height: $menuItem-height;
    align-items: center;
    line-height: 50px;
    box-sizing: border-box;

    i {
      color: $submenu-title;
    }
  }

  .el-menu--collapse {
    .el-submenu.is-active {
      .el-submenu__title {
        height: $menuItem-height;
        background-color: #1d2a60 !important;

        i {
          color: $theme;
        }
      }
    }
  }
}